<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- header -->
		<%@ include file="/WEB-INF/views/include/header.jsp"%>
		<link rel="stylesheet" href="<s:url value=" /assets/dist/css/bootstrap.css "></s:url>" />
		<link rel="stylesheet" href="<s:url value=" /assets/dist/css/Reset.css "></s:url>" />
		<%--本页面css--%>
		<link rel="stylesheet" href="<s:url value=" /assets/dist/css/index/index.css "></s:url>" />
		<style>
			<%--修改模态框样式--%>
			.modal-content {
				 border-radius: 0;
				 box-shadow: 0 -2px 15px rgba(0, 0, 0, .5);
			}
			.modal-content h4{
				font-size: 18px;
			}
		</style>
	</head>
	<body class="no-skin">
		<!-- /section:basics/navbar.layout -->
		<div class="main-container" id="main-container" style="background-color: #F7F7F7;">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<!-- /section:basics/sidebar -->
			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">
						<!-- /section:settings.box -->
						<div class="row no-margin  mian-course">
							<!-- 头部信息 -->
							<div class="col-xs-12">
								<div class="header-info clear">
									<div class="header-title pull-left">第一轮选修课</div>
									<div class="header-time pull-left">2018.07.01-2018.08.01</div>
									<div class="remaining-points pull-left">我的剩余投标点数:
										<em>7500点</em>
									</div>
									<select name="" class="pull-left" id="select-school">
										<option value="01">当前选课校区：思明</option>
										<option value="02">当前选课校区：翔安</option>
									</select>
								</div>
							</div>
							<div class="col-xs-12">
								<div class="tabs-button clear">
									<ul class="nav nav-tabs">
										<%--<li ><a href="#college-compulsory" data-toggle="tab">院系必修课</a></li>--%>
										<%--<li><a href="#school-compulsory" data-toggle="tab">全校性必修课 </a></li>--%>
										<%--<li><a href="#college-choose" data-toggle="tab">院系选修课</a></li>--%>
										<li class=" active">
											<a href="#school-choose" data-toggle="tab">全校选修课</a>
										</li>
										<%--<li><a href="#public-course" data-toggle="tab">公共课</a></li>--%>
										<%--<li><a href="#resets" data-toggle="tab">重修</a></li>--%>
									</ul>
								</div>
							</div>
							<div class="col-xs-12">
								<div class="floor-box clear">
									<div class="tab-content">
										<div class="searchs">
											<!-- 第一行 -->
											<div class="row">
												<div class="col-xs-2">
													开课院：
													<select name="">
														<option value="01">-请选择-</option>
														<option value="01">选择一</option>
														<option value="02">选择二</option>
													</select>
												</div>
												<div class="col-xs-2">
													开课系：
													<select name="">
														<option value="01">第二学期</option>
														<option value="01">选择一</option>
														<option value="02">选择二</option>
													</select>

												</div>
												<div class="col-xs-2">
													课程：
													<input type="text" placeholder="-输入-">
												</div>
												<div class="col-xs-2">
													教师：
													<input type="text" placeholder="-请输入-">
												</div>

											</div>
											<!-- 第二行 -->
											<div class="row">
												<div class="col-xs-2">
													星&nbsp;&nbsp;&nbsp;期：
													<select name="">
														<option value="01">-请选择-</option>
														<option value="01">选择一</option>
														<option value="02">选择二</option>
													</select>
												</div>
												<div class="col-xs-2  slelect-width">
													节&nbsp;&nbsp;&nbsp;次：
													<select name="">
														<option value="01">-请选择-</option>
														<option value="01">选择一</option>
														<option value="02">选择二</option>
													</select>
													--
													<select name="">
														<option value="01">-请选择-</option>
														<option value="01">选择一</option>
														<option value="02">选择二</option>
													</select>
												</div>
												<div class="col-xs-2">学分：
													<input type="text" placeholder="-输入-">
												</div>
											</div>
											<!-- 第三行  查询按钮 -->
											<div class="row query-area">
												<div class="col-xs-2">
													<button class="searchs-btn">
														<span class="search glyphicon glyphicon-search"></span>&nbsp;&nbsp;&nbsp;查询</button>
												</div>
											</div>

											<div class="row formater">
												<div class="col-xs-12">注意：红色框选修课程为各学院对外开放校选名额的专业课，欢迎感兴趣的同学选修。</div>
											</div>
										</div>
									</div>
									<!-- tab 容器 -->
								</div>
								<!-- floor-box 容器 -->
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div class="pull-right">	
									<shiro:hasPermission name="modules:sys:dept:query">
										<button class="btn btn-sm btn-info" id="query">查询</button>
									</shiro:hasPermission>
									<shiro:hasPermission name="modules:sys:dept:edit">
										<button class="btn btn-sm btn-default" id="edit">修改</button>
									</shiro:hasPermission>
									<shiro:hasPermission name="modules:sys:dept:create">
										<button class="btn btn-sm btn-success" id="create">新增</button>
									</shiro:hasPermission>
									<shiro:hasPermission name="modules:sys:dept:delete">
										<button class="btn btn-sm btn-danger" id="delete">删除</button>
									</shiro:hasPermission>
									<shiro:hasPermission name="modules:sys:dept:excel">
										<button class="btn btn-sm btn-pink" id="export">导出</button>
									</shiro:hasPermission>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
									<!-- jqGrid表格 -->
									<table id="gridTable"></table>
									<!-- jqGrid工具类 -->
									<div id="gridPager"></div>
									<!-- 查询对话框 -->
									<div style="display: none;">
										<div class="row" id="queryDialog"></div>
									</div>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
			
			<!-- dialog -->
			<%@ include file="/WEB-INF/views/include/dialog.jsp"%>
		</div><!-- /.main-container -->
	</div>	
		<!-- footer -->
		<script src="<s:url value="/assets/dist/js/jquery.min.js"></s:url>"></script>
		<%@ include file="/WEB-INF/views/include/footer.jsp"%>
		<script src="<s:url value="/assets/dist/js/bootstrap.min.js"></s:url>"></script>


		<script type="text/javascript">
			//基本路径
			var baseUrl = "<s:url value="/sys/course"></s:url>/"
			
			//jqgrid的表格高度
			var height = 320;
			//jqgrid表格行头的中文
			var colNames = ['','课程类别','课程性质', '课程名称', '班级','开课系','学分','上课时间','上课地点','可选/已选','选课'];
			//jqgrid表格中每一行的信息模型
			var colModel = [
                { name: 'sysId', width: 60, hidden: true, key: true},
				{name:'bab007',index:'bab007', width:60, editable: true},
				{name:'bab008',index:'bab008', width:60, editable: true},
				{name:'bab002',index:'bab002', width:60, editable: true},
				{name:'bab004',index:'bab004', width:60, editable: true},
				{name:'openDepartment',index:'openDepartment', width:60, editable: true},
				{name:'credits',index:'credits', width:60, editable: true},
				{name:'bab005',index:'bab005', width:60, editable: true},
				{name:'bab004',index:'bab004', width:60, editable: true},
                {name:'orSelect',index:'userCount', width:60, editable: true},
                {name:'conflict',index:'conflict', width:60, editable: true},

			];
			
			//jqgrid的具体执行方法
			jqgrid({
				gridTableId : "#gridTable",
				gridPagerId : "#gridPager"
			});
			
			//加载查询对话框
			$("#queryDialog").load(getUrl("filter"));
			
			//重置表单
			function reset() {
				resetForm("#formDialog form");
			}
			
			//显示查询对话框
			var queryDialog = $("#queryDialog");
			$("#query").click(function() {
				showDialog({
					dialogTitle: '查询对话框',
					dialogBody: queryDialog,
					dialogFoot: "<button type='button' class='btn btn-primary' onclick='query()'>查询</button>" +
					"<button type='button' class='btn btn-pink' onclick='reset()'>重置</button>" +
					"<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>"
				});
			});
			
			//具体查询方法
			function query() {
				seachJqgird("#gridTable","#formDialog form");
				$("#formDialog").modal('hide');
			}
			
			//更新操作
			$("#edit").click(function() {
				showEditView();
			});
			
			//执行更新操作
			function edit() {
				executeSaveOrUpdate({
					formId: "#formDialog form",
					dialogId: "#formDialog",
					url: getUrl("edit"),
					tableId: "#gridTable",
					successMessage: "更新成功",
					successTitle: '更新对话框',
					failMessage: '更新失败',
					failTitle: '消息对话框'
				});
			}
			
			//显示编辑对话框
			function showEditView() {
				showEditDialog({
					tableId: "#gridTable",
					dialogTitle: "更新对话框",
					dialogUrl: getUrl("edit"),
					dialogFoot: '<button type="button" class="btn btn-primary" onclick="edit()">更新</button>' + 
					'<button type="button" class="btn btn-pink" onclick="reset()">重置</button>' + 
					'<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>',
					errorTitle: "消息对话框",
					errorMutiSelectMessage: '您当前选中多行，请重新选择',
					errorUnSelectMessage: '您当前尚未选中一行，请选择后再试',
					errorOk: '确定'
				});
			}			
			
			//删除
			$("#delete").click(function() {
				showDeleteView();
			});
			
			//显示删除对话框
			function showDeleteView() {
				showDeleteDialog({
					url: getUrl("delete"),
					tableId: "#gridTable",
					confirmTitle: "确认对话框",
					confirmMessage: "是否确定删除?",
					confirmOk: "确定",
					confirmCancel: "取消",
					successMessage: "删除成功",
					successTitle: "消息对话框",
					failMessage: "删除失败",
					failTitle: "消息对话框",
					errorTitle: "警告提示框",
					errorMessage: "您当前尚未选中一行，请选择后再试",
					errorOk: "确定"
				});
			}
			
			//显示创建对话框
			$("#create").click(function(){
				loadDialog({
					dialogTitle: '创建对话框',
					dialogUrl: getUrl("create"),
					dialogFoot: '<button type="button" class="btn btn-primary" onclick="create()">添加</button>' + 
					'<button type="button" class="btn btn-pink" onclick="reset()">重置</button>' + 
					'<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>'
				});
			});
			
			//保存数据
			function create() {
				executeSaveOrUpdate({
					formId: "#formDialog form",
					dialogId: "#formDialog",
					url: getUrl("create"),
					tableId: "#gridTable",
					successMessage: "保存成功",
					successTitle: '保存对话框',
					failMessage: '保存失败',
					failTitle: '消息对话框'
				});
			}
		</script>
		
	</body>
</html>